<!-- 代表作：王峰 -->
<script setup>
import { ref, reactive, watch, onMounted, onUnmounted } from 'vue';
import { getViewer3D } from '@T2/utils/BIM_API.js';
import { MyHomeView } from './constant.ts';
import DataSide from './framework/dataSide.vue';
import DeviceSide from './framework/deviceSide.vue';
import CameraSide from './framework/cameraSide.vue';
import FlysSide from './framework/flysSide.vue';

const fileid = '10000840510899', domIDStr = 'bimfaceID';

onMounted(() => {
  initBIM();
  // setTimeout(() => {
  //   BIMRat.viewer3D.setBackgroundColor(new Glodon.Web.Graphics.Color(0, 0, 0, 1))
  // }, 5000);
});

/* 模型初始化 */
const BIMRat = reactive({
  viewer3D: null,
  model3D: null,
  drawableContainer: null,
});
function initBIM() {
  getViewer3D(fileid, domIDStr).then(res => {
    BIMRat.viewer3D = res;
    BIMRat.viewer3D.setBackgroundColor(new Glodon.Web.Graphics.Color(17, 38, 53, 0));
    BIMRat.viewer3D.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.ViewAdded, viewAdded);
  });
}

const BIMLoadOK = ref(false);
function viewAdded(e) {
  BIMRat.viewer3D.hideViewHouse();/* 隐藏ViewHouse */
  BIMRat.viewer3D.setCameraStatus(MyHomeView);
  window.onresize = function () {
    BIMRat.viewer3D.resize(document.documentElement.clientWidth, document.documentElement.clientHeight - 70);
  }
  getModel3D();
  createDrawableContainer();
  // createWaterEffect();
  
  BIMRat.viewer3D.render();
  BIMLoadOK.value = true;
}
/* 外部标签容器 */
function createDrawableContainer() {
  let drawableContainerConfig = new Glodon.Bimface.Plugins.Drawable.DrawableContainerConfig();
  drawableContainerConfig.viewer = BIMRat.viewer3D;
  BIMRat.drawableContainer = new Glodon.Bimface.Plugins.Drawable.DrawableContainer(drawableContainerConfig);
}

/* 水面效果, 太卡了 */
// function createWaterEffect() {
//   let WaterEffectConfig = new Glodon.Bimface.Plugins.Animation.WaterEffectConfig();
//   WaterEffectConfig.ids = [{
//     'modelId': "10000840510899",
//     'objectIds': [
//       '920989', '921874', '922019', '922068', '922200', '922253',//第一列的
//       '921681', '921920', '922117', '922104', '922311', '922324',//第二列的
//       '921700', '921941', '922130', '922143', '922349', '922362',//第三列的
//       '921721', '921962', '922169', '922156', '922383', '922396',//第四列的
//     ],
//   }];
//   WaterEffectConfig.viewer = BIMRat.viewer3D;
//   WaterEffectConfig.flow = false;
//   let water = new Glodon.Bimface.Plugins.Animation.WaterEffect(WaterEffectConfig);
//   let waterColor = new Glodon.Web.Graphics.Color('#23A9F2', 0.4);
//   water.setColor(waterColor);
// }

/* 模型对象 */
function getModel3D() {
  BIMRat.model3D = BIMRat.viewer3D.getModel(fileid);
  /* 道路 */
  BIMRat.model3D.overrideComponentsColorById(["1041292"], new Glodon.Web.Graphics.Color("#333b46", 1));
  /* 树 */
  BIMRat.model3D.overrideComponentsColorByObjectData([{'categoryId': '-2001360'}], new Glodon.Web.Graphics.Color("#283421", 1));
}

function getView() {
  // console.log(BIMRat.viewer3D.getCameraStatus())
  console.log(JSON.stringify(BIMRat.viewer3D.getCameraStatus()))
}


/* 底部按钮切换 */
const showType = ref('data-side');
function showTypeChange(type) {
  showType.value = showType.value === type ? '' : type;
}
watch(() => showType.value, (nv, ov) => {
  BIMRat.model3D.restoreDefault();
  BIMRat.drawableContainer.clear();
  BIMRat.viewer3D.setCameraStatus(MyHomeView);
});
</script>

<template>
  <div class="view">
    <!-- <div class="viewerget" @click="getView">click</div> -->
    
    <div style="height: 100%;" :id="domIDStr"></div>
    
    <img class="bottom-bg" :src="require('./assets/bottom/bg.png')" />
    
    <div class="bottom-btns" v-if="BIMLoadOK">
      <button :class="{'isActive': showType === 'data-side'}" @click="showTypeChange('data-side')">
        <img :src="showType === 'data-side' ? require('./assets/bottom/btn_data_active.png') : require('./assets/bottom/btn_data.png')" />
        数据
      </button>
      <button :class="{'isActive': showType === 'device-side'}" @click="showTypeChange('device-side')">
        <img :src="showType === 'device-side' ? require('./assets/bottom/btn_device_active.png') : require('./assets/bottom/btn_device.png')" />
        设备
      </button>
      <button :class="{'isActive': showType === 'camera-side'}" @click="showTypeChange('camera-side')">
        <img :src="showType === 'camera-side' ? require('./assets/bottom/btn_video_active.png') : require('./assets/bottom/btn_video.png')" />
        视频
      </button>
      <button :class="{'isActive': showType === 'flys-side'}" @click="showType = 'flys-side'">
        <img :src="showType === 'flys-side' ? require('./assets/bottom/btn_fly_active.png') : require('./assets/bottom/btn_fly.png')" />
        漫游
      </button>
    </div>
    
    <template v-if="BIMLoadOK">
      <DataSide v-if="showType === 'data-side'" />
      
      <DeviceSide v-else-if="showType === 'device-side'" :BIMRat="BIMRat"  />
      
      <CameraSide v-else-if="showType === 'camera-side'" :BIMRat="BIMRat" />
      
      <FlysSide v-else-if="showType === 'flys-side'" :BIMRat="BIMRat" @close-flys="showType = 'data-side'" />
    </template>
    
  </div>
</template>


<style lang="scss" scoped>
@use "bim.scss";
@font-face {
  font-family: "YouSheBiaoTiHei";
  src: url("/font/优设标题黑.ttf");
}
@font-face {
  font-family: "PangMenZhengDao";
  src: url("/font/庞门正道标题体3.0.ttf");
}
.viewerget {
  position: absolute;
  color: #fff;
  left: 0;
  top: 0;
  z-index: 3;
}
.view {
  background-color: transparent;
  // background-color: #c8c8c8;
  position: fixed !important;
  left: 0;
  top: 70px;
  width: 100%;
  height: calc(100vh - 70px);
  z-index: 1;
}
.v-enter-active, .v-leave-active {
  transition: opacity 1.5s;
}
.v-enter-from, .v-leave-to {
  opacity: 0;
}
@keyframes bEnter {
  0% {
    transform: translateY(100px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}
img.bottom-bg {
  position: absolute;
  bottom: 0;
  height: 44px;
  width: 100%;
}
.bottom-btns {
  position: absolute;
  bottom: 56px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  button {
    background: url('./assets/bottom/btn_bg.png') no-repeat center;
    background-size: 100% 100%;
    border: none;
    width: 160px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: YouSheBiaoTiHei;
    font-weight: 400;
    font-size: 20px;
    color: #A5EBE4;
    margin: 0 12px;
    cursor: pointer;
    &.isActive {
      background: url('./assets/bottom/btn_bg_active.png') no-repeat center;
      background-size: 100% 100%;
      font-family: YouSheBiaoTiHei;
      font-weight: 400;
      font-size: 20px;
      color: #005E5E;
    }
    img {
      width: 20px;
      height: 20px;
      margin-right: 8px;
    }
  }
}

</style>